import React from 'react';
import {Input, Button, List} from 'antd';
import 'antd/dist/antd.css';

export const AppUi = (props) => {
    return (
        <div>
            <Input
                value={props.inputValue}
                placeholder={'Input your name...'}
                style={{width: '300px', margin: '15px', opacity: '0.6'}}
                onChange={props.handleInputChange}
            />
            <Button
                type="primary"
                onClick={props.handleBtnClick}
            >Add</Button>
            <List dataSource={props.list}
                  style={{width: '300px', margin: '15px', background:'white'}}
                  bordered
                  size={"small"}
                  renderItem={(item, index) => {
                      return (<List.Item
                          onClick={() => {
                              props.handleListClick(index)
                          }}>{item}
                      </List.Item>)
                  }
                  }
            />
        </div>
    )
};